﻿{% extends "base.html" %}



{% block css %}
<link rel="stylesheet" href="/static/css/admin.css">
<link rel="stylesheet" href="/static/ztree3/css/bootstrapStyle/bootstrapStyle.css" type="text/css">


{% endblock %}


{% block center %}


<!--头部导航-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-body">
    <ol class="breadcrumb" style="margin-bottom: 0px;background-color: #FFFFFF;">
      <li><a href="/" style="color: #377CD8;">首页</a></li>
      <li><a href="#">发布管理</a></li>
      <li class="active">{{ title }}</li>
    </ol>
  </div>
</div>



<!--用户信息-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-heading">
      <div class="row" style="padding-top:5px;padding-left:10px;">
          <div class="col-sm-6">

              <a class="btn btn-sm btn-success" data-toggle="modal" data-target="#siteModal"> 添加站点 </a>

          </div>
      </div>

  </div>
  <div class="panel-body">


        <div style="margin-bottom: 10px;">

            <div class="col-sm-12">
                <table class="table table-hover table-bordered">
                  <thead>
                    <tr style="background-color: #f5f5f5;">

                      <th>站点名称</th>
                      <th>所属项目</th>
                      <th>描述</th>
                      <th>站点地址</th>
                      <th>运行环境</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for site in site_list %}
                    <tr>

                      <td>{{ site.site_name }}</td>
                      <td>{{ site.site_project }}</td>
                      <td>{{ site.site_msg }}</td>
                      <td>{{ site.site_url }}</td>
                      <td>

                          <div style="max-width:200px;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">
                              {{ site.site_depend }}
                          </div>


                      </td>
                      <td style="padding-left:5px;">

                        <a href="#" style="text-decoration:none;" name="edit-site" site_id="{{ site.site_id }}" data-toggle="tooltip" data-placement="left" title="修改"><span class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;

                        <a href="#" style="text-decoration:none;" name="del-site" site_id="{{ site.site_id }}" data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span> </a>

                      </td>
                    </tr>
                  {% endfor %}

                  </tbody>
                </table>

                <div style="margin-top:-30px;padding-right:9%">
                  <ul class="pagination pull-right">
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">下一页</a></li>
                  </ul>
                </div>
            </div>

        </div>
  </div>
</div>


{% endblock %}


<!-- Modal -->
{% block modal %}

<div class="modal fade" id="siteModal" tabindex="-1" role="dialog" aria-labelledby="siteModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="siteModalLabel">添加站点</h4>
      </div>
      <div class="modal-body">

         <form>
          <div class="form-group">
            <label >站点名称</label>
            <input  class="form-control"  placeholder="站点名称" id="site-name">
          </div>
          <div class="form-group">
            <label >站点描述</label>
            <input  class="form-control"  placeholder="站点描述" id="site-msg">
          </div>
          <div class="form-group">
            <label >所属项目</label>
              <select name="" id="site-project" class="form-control">
                  {% for project in project_list %}
                  <option value="{{ project.project_id }}">{{ project.project_name }}</option>
                  {% endfor %}
              </select>
          </div>
          <div class="form-group">
            <label >站点地址</label>
            <input  class="form-control"  placeholder="站点地址" id="site-url">
          </div>
          <div class="form-group">
            <label >运行环境</label><br>
            <!-- Build your select: -->
            <select id="site-depend" multiple="multiple" class="form-control">
                {% for depend in depend_list %}
                <option value="{{ depend }}">{{ depend }}</option>
                {% endfor %}
            </select>
          </div>

        </form>

      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

        <button type="button" class="btn btn-primary" id="sub-site">提交</button>

      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="edit-siteModal" tabindex="-1" role="dialog" aria-labelledby="edit-siteModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="edit-siteModalLabel">修改站点</h4>
      </div>
      <div class="modal-body">

         <form>
          <div class="form-group">
            <label >站点名称</label>
            <input  class="form-control"  placeholder="站点名称" id="edit-site-name">
          </div>
          <div class="form-group">
            <label >站点描述</label>
            <input  class="form-control"  placeholder="站点描述" id="edit-site-msg">
          </div>
          <div class="form-group">
            <label >所属项目</label>
              <select name="" id="edit-site-project" class="form-control">
                  {% for project in project_list %}
                  <option value="{{ project.project_id }}">{{ project.project_name }}</option>
                  {% endfor %}
              </select>
          </div>
          <div class="form-group">
            <label >站点地址</label>
            <input  class="form-control"  placeholder="站点地址" id="edit-site-url">
          </div>
          <div class="form-group">
            <label >运行环境</label><br>
            <!-- Build your select: -->
            <select id="edit-site-depend" multiple="multiple" class="form-control">
                {% for depend in depend_list %}
                <option value="{{ depend }}">{{ depend }}</option>
                {% endfor %}
            </select>
          </div>

        </form>

      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

        <button type="button" class="btn btn-primary" id="sub-edit-site">提交</button>

      </div>
    </div>
  </div>
</div>
<script>
    var allDepend = [{% for depend in depend_list %}"{{ depend }}",{% endfor %}];

</script>

{% endblock  %}

{% block js %}

    <script type="text/javascript" src="/static/js/code.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#site-depend').multiselect({
                    nonSelectedText: '请选择',
                    includeSelectAllOption: true,
                    buttonWidth: '100%',
                    numberDisplayed: 10,
                    nSelectedText: '个被选中',
                    selectAllText: '全选',
                    allSelectedText: '全选',

            });
        });



        $(document).ready(function() {
            $('#edit-site-depend').multiselect({
                    nonSelectedText: '请选择',
                    includeSelectAllOption: true,
                    buttonWidth: '100%',
                    numberDisplayed: 10,
                    nSelectedText: '个被选中',
                    selectAllText: '全选',
                    allSelectedText: '全选',

            });
        });

    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })


    </script>

{% endblock %}


